<div>
  <div class="searchItem">
    <label>订单编号：</label>
    <input nz-input placeholder="请输入订单编号" [(ngModel)]="table.query.orderNum"/>
  </div>
  <div class="searchItem">
    <label>商品名称：</label>
    <input nz-input placeholder="请输入商品编号或名称" [(ngModel)]="table.query.goods"/>
  </div>
  <div class="searchItem">
    <label>用户：</label>
    <input nz-input placeholder="请输入用户或手机号码" [(ngModel)]="table.query.user"/>
  </div>
  <div class="searchItem">
    <label>物流单号：</label>
    <input nz-input placeholder="请输入物流单号" [(ngModel)]="table.query.expressNo"/>
  </div>
  <div class="searchItem">
    <label>订单类型：</label>
    <nz-select [(ngModel)]="table.query.source" nzMode="multiple"
               [nzMaxTagCount]="1" nzAllowClear nzPlaceHolder="请选择" [nzBackdrop]="true">
      <nz-option [nzValue]="0" nzLabel="普通商品"></nz-option>
      <nz-option [nzValue]="1" nzLabel="二手商品"></nz-option>
    </nz-select>
  </div>
  <div class="searchItem">
    <label>订单状态：</label>
    <nz-select [(ngModel)]="table.query.status" nzMode="multiple"
               [nzMaxTagCount]="1" nzAllowClear nzPlaceHolder="请选择" [nzBackdrop]="true">
      <nz-option [nzValue]="0" nzLabel="有效"></nz-option>
      <nz-option [nzValue]="1" nzLabel="无效"></nz-option>
      <nz-option [nzValue]="2" nzLabel="待付款"></nz-option>
      <nz-option [nzValue]="3" nzLabel="待审核"></nz-option>
      <nz-option [nzValue]="4" nzLabel="审核不通过"></nz-option>
      <nz-option [nzValue]="5" nzLabel="审核通过"></nz-option>
      <nz-option [nzValue]="6" nzLabel="排队发货"></nz-option>
      <nz-option [nzValue]="7" nzLabel="待发货"></nz-option>
      <nz-option [nzValue]="8" nzLabel="待收货（已发货）"></nz-option>
      <nz-option [nzValue]="9" nzLabel="交易完成"></nz-option>
      <nz-option [nzValue]="10" nzLabel="支付超时"></nz-option>
      <nz-option [nzValue]="11" nzLabel="客服取消"></nz-option>
      <nz-option [nzValue]="12" nzLabel="客户取消"></nz-option>
      <nz-option [nzValue]="13" nzLabel="售后中"></nz-option>
      <nz-option [nzValue]="14" nzLabel="全部退货"></nz-option>
      <nz-option [nzValue]="16" nzLabel="交易关闭"></nz-option>
    </nz-select>
  </div>
  <div class="searchItem">
    <label>售后状态：</label>
    <nz-select [(ngModel)]="table.query.refundState" nzMode="multiple"
               [nzMaxTagCount]="1" nzAllowClear nzPlaceHolder="请选择" [nzBackdrop]="true">
      <!--      <nz-option [nzValue]="0" nzLabel="未付款"></nz-option>-->
      <!--      <nz-option [nzValue]="1" nzLabel="已付款"></nz-option>-->
      <nz-option [nzValue]="2" nzLabel="部分退款"></nz-option>
      <nz-option [nzValue]="3" nzLabel="全部退款"></nz-option>
    </nz-select>
  </div>
  <div class="searchItem">
    <label for="creatTime">下单时间：</label>
    <nz-range-picker id="creatTime" nzFormat="yyyy-MM-dd" [(ngModel)]="table.query.creatTime"></nz-range-picker>
  </div>
  <div class="searchItem">
    <label for="payTime">付款时间：</label>
    <nz-range-picker id="payTime" nzFormat="yyyy-MM-dd" [(ngModel)]="table.query.payTime"></nz-range-picker>
  </div>
  <div class="searchItem">
    <label for="deliverTime">发货时间：</label>
    <nz-range-picker id="deliverTime" nzFormat="yyyy-MM-dd" [(ngModel)]="table.query.deliverTime"></nz-range-picker>
  </div>
  <div class="searchItem">
    <button nz-button nzType="primary" (click)="queryBtn()">查询</button>
    <button nz-button nzType="default" (click)="resetCondition()">重置</button>
  </div>
  <div>
    <button nz-button nzType="primary" (click)="export()">导出</button>
  </div>
</div>
<!--表格-->
<nz-table
  style="margin-top: 8px"
  #rowSelectionTable
  nzSize="small"
  nzShowSizeChanger
  nzShowQuickJumper
  nzOuterBordered
  [nzData]="table.listData.records"
  [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
  [nzTotal]="table.listData.total"
  [(nzPageIndex)]="table.query.page"
  [(nzPageSize)]="table.query.pageSize"
  [nzFrontPagination]="false"
  [nzShowTotal]="totalTemplate"
  (nzPageIndexChange)="onPageIndexChange($event)"
  (nzPageSizeChange)="onPageSizeChange($event)"
>
  <thead>
  <tr>
    <!--    <th [nzChecked]="tableChecked" [nzIndeterminate]="tableIndeterminate"-->
    <!--        (nzCheckedChange)="onTableChecked($event)"></th>-->
    <th nzAlign="center" nzWidth="640px">商品</th>
    <th nzAlign="center">单价</th>
    <th nzAlign="center">数量</th>
    <th nzAlign="center">实收金额</th>
    <th nzAlign="center" nzWidth="290px">收货地址</th>
    <th nzAlign="center">物流信息</th>
    <th nzAlign="center" nzWidth="190px">下单时间+付款时间</th>
    <th nzAlign="center">发货时间</th>
    <th nzAlign="center">订单类型</th>
    <th nzAlign="center" nzWidth="140px">订单状态</th>
    <th nzAlign="center">售后状态</th>
    <th nzAlign="center" nzWidth="160px">操作</th>
  </tr>
  </thead>
  <tbody>
  <ng-container *ngFor="let data of rowSelectionTable.data">
    <tr style="background-color: #fafafa">
      <!--      <td [nzChecked]="tableExpandSet.has(data['id'])"-->
      <!--          [nzIndeterminate]="rowIndeterminate(data)" (nzCheckedChange)="onRowChecked($event)"-->
      <!--          [nzDisabled]="data['disabled']">-->
      <!--      </td>-->
      <td colspan="24" *ngIf="data.oidList?.length">
        <span style="margin-right: 4px">普普母订单号：{{ data.orderNum }}</span>
        <span style="margin-right: 4px" *ngIf="data.otherOrderNo">爱思商城父订单号：{{data.otherOrderNo}}</span>
        <span style="margin-right: 4px">用户id：{{data.userId}}</span>
        <span style="margin-right: 4px">手机号：{{data.phone || '-'}}</span>
      </td>
      <td colspan="24" *ngIf="!data.oidList?.length">
        <span style="margin-right: 4px">普普订单号：{{ data.orderNum }}</span>
        <span style="margin-right: 4px" *ngIf="data.otherOrderNo">爱思商城订单号：{{data.otherOrderNo}}</span>
        <span style="margin-right: 4px">用户id：{{data.userId}}</span>
        <span style="margin-right: 4px">手机号：{{data.phone || '-'}}</span>
      </td>
    </tr>
    <tr style="width: 100%" *ngFor="let child of data.oidList">
      <!--      <td-->
      <!--        [nzChecked]="tableExpandSet.has(data['id'])"-->
      <!--        [nzDisabled]="data['disabled']"-->
      <!--        (nzCheckedChange)="onItemChecked(data['id'], $event)"-->
      <!--      ></td>-->
      <td style="padding-left: 32px;padding-top: 32px;position: relative">
        <span style="position: absolute;left: 40px;top: 8px">子订单号：{{ child.orderNum }}<span style="margin-left: 4px"
                                                                                            *ngIf="child.otherOrderNo">爱思商城子订单号：{{ child.otherOrderNo }}</span></span>
        <div *ngFor="let detail of child.orderDetailsList"
             style="display: flex;flex-direction: row;align-items: center;padding-left: 24px;height: 80px">
          <img
            nz-image
            width="60px"
            height="60px"
            style="margin-right: 8px"
            *ngIf="detail['icon']"
            [nzSrc]="detail['icon']"
            [alt]="detail['goodsName']"
          />
          <span>
      <a style="color: #1890ff" *ngIf="detail.source===0" href=".#/goods/goodsTabs/{{detail.goodsId}}"
         target="_blank">{{detail['goodsName']}}</a>
      <a style="color: #1890ff" *ngIf="detail.source===1"
         target="_blank"
         [routerLink]="['/used-store/usedCommodityInfo']"
         [queryParams]="{ id: detail.goodsId }">
        {{detail['goodsName']}}
      </a>
          </span>
        </div>
      </td>
      <td [ngStyle]="{paddingTop: child.orderDetailsList>1?'32px':''}" nzAlign="center">
        <div *ngFor="let detail of child.orderDetailsList"
             style="display: flex;flex-direction: row;align-items: center;justify-content: center;height: 80px">
          <span>{{ detail.price }}</span>
        </div>
      </td>
      <td [ngStyle]="{paddingTop: child.orderDetailsList>1?'32px':''}" nzAlign="center">
        <div *ngFor="let detail of child.orderDetailsList"
             style="display: flex;flex-direction: row;align-items: center;justify-content: center;height: 80px">
          <span>{{ detail.num }}</span>
        </div>
      </td>
      <td nzAlign="center">{{ child.realPrice }}</td>
      <td nzAlign="center">
        <span>
          <div>{{child.consignee}} {{child.tel}}</div>
          <div>{{ child.address }}</div>
        </span>
      </td>
      <td nzAlign="center">
        <div>
          {{getLogisticsName(data.expressCode)}}
        </div>
        <div>
          {{ data.expressNum }}
        </div>
      </td>
      <td>
        下单：{{ child.createTime }}<br>
        付款：{{ child.payTime }}
      </td>
      <td nzAlign="center">{{ child.shipTime }}</td>
      <td nzAlign="center">{{ child.source === 0 ? '普通商品' : '二手商品' }}</td>
      <td nzAlign="center" [attr.statusColor]="child.status">{{ ORDERSTATUS[child.status] }}</td>
      <td nzAlign="center">{{ child.isRefund === 1 ? REFUNDSTATE[child.status] : '-' }}</td>
      <td nzAlign="center">
        <a (click)="toDetail(child.id)">详情</a>
      </td>
    </tr>

    <tr style="width: 100%" *ngIf="data.orderDetailsList">
      <!--      <td-->
      <!--        [nzChecked]="tableExpandSet.has(data['id'])"-->
      <!--        [nzDisabled]="data['disabled']"-->
      <!--        (nzCheckedChange)="onItemChecked(data['id'], $event)"-->
      <!--      ></td>-->
      <td style="padding-left: 32px;">
        <div *ngFor="let detail of data.orderDetailsList"
             style="display: flex;flex-direction: row;align-items: center;padding-left: 24px;height: 80px">
          <img
            nz-image
            width="60px"
            height="60px"
            style="margin-right: 8px"
            *ngIf="detail['icon']"
            [nzSrc]="detail['icon']"
            [alt]="detail['goodsName']"
          />
          <span>
      <a style="color: #1890ff" *ngIf="detail.source===0" href=".#/goods/goodsTabs/{{detail.goodsId}}"
         target="_blank">{{detail['goodsName']}}</a>
      <a style="color: #1890ff" *ngIf="detail.source===1"
         target="_blank"
         [routerLink]="['/used-store/usedCommodityInfo']"
         [queryParams]="{ id: detail.goodsId }">
        {{detail['goodsName']}}
      </a>
          </span>
        </div>
      </td>
      <td [ngStyle]="{paddingTop: data.orderDetailsList>1?'32px':''}" nzAlign="center">
        <div *ngFor="let detail of data.orderDetailsList"
             style="display: flex;flex-direction: row;align-items: center;justify-content: center;height: 80px">
          <span>{{ detail.price }}</span>
        </div>
      </td>
      <td [ngStyle]="{paddingTop: data.orderDetailsList>1?'32px':''}" nzAlign="center">
        <div *ngFor="let detail of data.orderDetailsList"
             style="display: flex;flex-direction: row;align-items: center;justify-content: center;height: 80px">
          <span>{{ detail.num }}</span>
        </div>
      </td>
      <td nzAlign="center">{{ data.realPrice }}</td>
      <td nzAlign="center">
        <div>{{data.consignee}} {{data.tel}}</div>
        <div>{{ data.address }}</div>
      </td>
      <td nzAlign="center">
        <div>
        {{getLogisticsName(data.expressCode)}}
        </div>
        <div>
          {{ data.expressNum }}
        </div>
      </td>
      <td>
        下单：{{ data.createTime }}<br>
        付款：{{ data.payTime || '-' }}
      </td>
      <td nzAlign="center">{{ data.shipTime }}</td>
      <td nzAlign="center">
        <span *ngIf="data.source!==3">{{ data.source === 0 ? '普通商品' : '二手商品' }}</span>
        <span *ngIf="data.source===3">
          <div>普通商品</div>
          <div>二手商品</div>
        </span>
      </td>
      <td nzAlign="center" [attr.statusColor]="data.status">{{ ORDERSTATUS[data.status] }}</td>
      <td nzAlign="center">{{ data.isRefund === 1 ? REFUNDSTATE[data.status] : '-' }}</td>
      <td nzAlign="center">
        <a (click)="toDetail(data.id)">详情</a>
        <!--        <a (click)="showCancelModal(data)">取消订单</a>-->
      </td>
    </tr>
  </ng-container>
  </tbody>
</nz-table>

<!-- 分页template -->
<ng-template #totalTemplate let-total>共有 {{ table.listData.total }} 条</ng-template>

<!--取消订单-->
<nz-modal
  [nzVisible]="cancelModal.visible"
  nzTitle="取消订单"
  (nzOnCancel)="hideCancelModal()">
  <div *nzModalContent>
    <div class="searchItem afterSalesRefundModal">
      <label for="afterSalesRefundModalRemark" style="float: left">备注：</label>
      <textarea style="width: 300px!important;"
                id="afterSalesRefundModalRemark"
                nz-input
                [maxLength]="100"
                [(ngModel)]="cancelModal.remark"
                placeholder="请输入备注"
                [nzAutosize]="{ minRows: 2, maxRows: 6 }"
      ></textarea>
    </div>
    <div>
      <div>提示</div>
      <div>
        1、确认以后，该订单会直接把用户支付的金额原路退回到用户账户
      </div>
      <div>
        2、请提前做好备注记录，不要胡乱操作，避免造成损失
      </div>
    </div>
  </div>
  <div *nzModalFooter>
    <button nz-button nzType="default" (click)="hideCancelModal()">取消</button>
    <button nz-button nzType="primary" (click)="cancelOrder()">确认</button>
  </div>
</nz-modal>
